<script lang="ts" setup>
import { usePermissionStore } from '@/store/modules/permission';
import { isNumber, cloneDeep } from '@vc/utils';
import { useErrorLogStore } from 'vc/src/store/error-log';
import { useMultipleTabStore } from 'vc/src/store/multiple-tab';
import { computed, unref } from 'vue';
import LayoutHeader from './header.vue';
import { useMultipleTabSetting } from './use/useMultipleTabSetting';
import { useRootSetting } from './use/useRootSetting';
import { useTransitionSetting } from './use/useTransitionSetting';
import PwaInstall from './components/pwa-install.vue';
import Icon from 'vc/src/common/icon/index.vue';


const { getOpenPageLoading } = useTransitionSetting();
const tabStore = useMultipleTabStore();
const errorStore = useErrorLogStore();

const { getShowMultipleTab } = useMultipleTabSetting();
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
const { getOpenKeepAlive, getUseErrorHandle } = useRootSetting();

const openKeepAlive = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));

const permissionStore = usePermissionStore();

const route = useRoute();

const showSide = computed(() => {
  return !route.meta.hideSide && permissionStore.getMenuList?.length;
});

let collapse = ref(false);

let sideWidth = useCssVar('--vc-layout-side-width');
let sideCollapseWidth = useCssVar('--vc-layout-side-collapse-width');

const layoutStyle = computed(() => {
  return route.meta.currentActivePath ? {} : {
    marginLeft: showSide.value ? collapse.value ? sideCollapseWidth.value : sideWidth.value : 0
  };
});

const collapseStyle = computed(() => {
  return {
    width: collapse.value ? '56px' : '200px',
    // border: collapse.value ? 'none' : '1px solid #F3F3F3',
    borderLeft: 'none'
  };
});

const iframePages = computed(() => {
  return tabStore.getTabList.filter((item) => {
    return item.meta.isIframe || item.meta.frameSrc;
  });
});

const getMenuList = computed(() => {
  if (isNumber(route.meta.menuIndex)) {
    const menuList = cloneDeep(permissionStore.getMenuList?.[route.meta.menuIndex]);
    const subMenuList = menuList?.functions?.filter((item, index) => {
      return route.meta.subMenuIndex === index;
    });
    
    return menuList.functions = subMenuList;
  } else {
    return [];
  }
});

const overflowClass = computed(() => route.meta.scrollDom || route.meta.hideScroll ? '' : 'overflow-auto overflow-overlay');
</script>

<template>
  <div class="layout-main">
    <div class="header-hidden-dom" />
    <layout-header />
    <div :class="['layout-container', overflowClass]" :style="layoutStyle">
      <div v-show="showSide">
        <vc-layout-side
          :extraHeight="141"
          :width="sideWidth"
          :collapseWidth="sideCollapseWidth"
          :collapse="collapse"
          :menuCfg="{
                  menus: getMenuList,
                  attrMapping: {
                    path: 'url',
                    children: 'functions',
                    title: 'name',
                    index: 'id',
                    disabled: 'url'
                  }
                }">
          <div class="collapse-menu" :style="collapseStyle">
            <Icon @click="collapse = !collapse" :style="{ transform: collapse ? 'rotateY(180deg)' : ''}" icon="vi-shouqi" color='#999999' :size="16" :cursor="true"></Icon>
          </div>
        </vc-layout-side>
      </div>
      
      <div
        :class="['layout-content', overflowClass]"
        v-spin="getOpenPageLoading && tabStore.getPageLoading">
        <vc-content-layout
          :pageErrorStatus="errorStore.getErrorStatus"
          :cachedTabList="tabStore.getCachedTabList"
          :enableTransition="getEnableTransition"
          :enableErrorHandle="getUseErrorHandle"
          :openKeepAlive="openKeepAlive"
          :transitionName="getBasicTransition"
        />
        <vc-iframe-layout v-if="tabStore.reloadFlag && iframePages?.length"
          :iframePages="iframePages" />
      </div>
    </div>
    <vc-layout-footer class="layout-footer" :leftDistance="0">
      <template #right>
        <div class="footer-right">
          <pwa-install />
          <vc-full-screen />
        </div>
      </template>
    </vc-layout-footer>
    <vc-back-top
      :key="route.meta?.isMoreTabPage ? route.fullPath : undefined"
      :right="30" :bottom="100" :target="route.meta?.scrollDom || '.layout-content'"
      class="z-10" />
  </div>
</template>

<style lang="scss" scoped>
.layout-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .header-hidden-dom {
    flex: none;
    height: 80px;
  }

  .layout-container {
    flex: auto;
    background-color: #f8f8f8;
    // noinspection CssInvalidPropertyValue
    height: calc(100% - getCssVar(layout-header-height) - getCssVar(layout-footer-height));
    .layout-content {
      height: 100%;
    }
  }

  .collapse-menu {
    position: fixed;
    bottom: 30px;
    left: 0;
    background: white;
    padding: 0px 20px;
    height: 48px;
    display: flex;
    align-items: center;
    z-index: $collapse-menu-z-index;
    border-top: 1px solid #F3F3F3;
  }
  
  .footer-right {
    // height: 30px;
    display: flex;
    justify-content: flex-end;
    color: #111;
    font-size: 12px;
    cursor: pointer;

    :deep(.vc-full-screen) {
      margin-right: 8px;
    }
  }
}
:deep(.vc-layout-side) {
  border: 0;
}
:deep(.vc-multiple-tabs){
  .vc-tabs__item{
    border: none;
    border-right: 1px solid #E3E3E3;
    ::after{
      height: 40px;
      width: 20px;
    }
  }
}
:deep(.layout-footer) {
  box-shadow: 0px -4px 8px 0px rgba(187,187,187,0.15);
  .vc-layout-footer__left {
    min-width: $footer-left-width;
  }

  .vc-layout-footer__right {
    min-width: $footer-right-width;
  }
}
</style>
